<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float浮动布局</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 10px solid blue;

            /*float来设置元素浮动布局,浮动之后元素会脱离当前布局流,
            元素原来的位置会被后边的元素挤占.
            float: left是往左浮动,right是往右浮动.*/
            float: right;

            /*设置透明度,取值是[0.0~1.0]*/
            opacity: 0.4;
        }

        div:nth-child(1){
            float:left;
        }
        #cl{
            height: 100px;
            background-color: gold;

            /*clear: 用来清除浮动元素对当前元素产生的影响,
            left只清除左浮动,right清除右浮动.both清除所有浮动.*/
            clear: left;
            clear: both;
        
        }

        #nav{
            height: 100px;
            background-color: #334566;
            text-align: center;
            line-height: 100px;

            /*display: none,可以用来隐藏元素*/
            /*display: none;*/
        }

        .content{
            float: left;
            width: 33.3333%;
            background-color: #556689;
            height: 500px;
            border: 1px solid blue;
            box-sizing: border-box;


        }

        footer{
            height: 100px;
            background-color: #112233;
        }

        #clearfoot{
            clear:both;
        }


    </style>
</head>
<body>
    <div></div>

    <div></div>

    <!--多数情况下,我们可能会创建一个空标签在浮动元素之后,用来代替清除浮动影响.-->
    <header id="clear"></header>

    <section id="cl"></section>

    <header id="nav">这是一个导航栏</header>
    
    <section class="content">内容一</section>
    <section class="content">内容二</section>
    <section class="content">内容三</section>
    <footer id="clearfoot">
        这是页面底部
    </footer>
    
    
</body>
</html>